<template>
    <!-- v-for双层循环选中元素的方法 -->
    <div class="vfor-demo">
        <div class="demo-content" v-for= "(items, indexs) in listData" :key = "indexs">
            <h4>{{items.name}}</h4>
            <ul>
                <li v-for = "(item, index) in items.sublist" :key="index" :class= "(clickIndex === indexs +'|'+index)? 'actived':''" 
                @click = "chooseContent(item,indexs, index)">
                    {{item}}{{showFlag}}
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
	data() {
		return {
			clickIndex: '',
			showFlag: false,
			listData: [
				{
					name: '第一',
					sublist: [
						{ content: '第一下的第一个' },
						{ content: '第一下的第2个' },
						{ content: '第一下的第3个' },
						{ content: '第一下的第4个' },
						{ content: '第一下的第5个' },
					],
				},
				{
					name: '第二',
					sublist: [
						{ content: '第2下的第一个' },
						{ content: '第2下的第2个' },
						{ content: '第2下的第3个' },
						{ content: '第2下的第4个' },
						{ content: '第2下的第5个' },
					],
				},
				{
					name: '第三',
					sublist: [
						{ content: '第一下的第一个' },
						{ content: '第一下的第2个' },
						{ content: '第一下的第3个' },
						{ content: '第一下的第4个' },
						{ content: '第一下的第5个' },
					],
				},
			],
		}
	},
	methods: {
		chooseContent(item, indexs, index) {
			this.clickIndex = indexs + '|' + index
			this.showFlag = !this.showFlag
		},
		filters: {
			firstDataFilter: function(item) {
				if (item.planLevel === '00') {
				}
				return item.planLevel
			},
		},
	},
}
</script>
<style>
ul,
li {
	list-style: none;
}
h4,
li {
	padding: 20px 0;
	border-bottom: 2px solid #dcdcdc;
}
.actived {
	background: pink;
	color: orange;
}
</style>
